<template>
    <div :class="[className, `text-${horizontalPosition}`]">
        <h2 class="mb-4 text-3xl font-light tracking-tight md:text-4xl">{{ title }}</h2>
        <p class="mx-auto max-w-md font-light text-gray-500">{{ subtitle }}</p>
    </div>
</template>

<script setup lang="ts">
withDefaults(
    defineProps<{
        title?: string;
        subtitle?: string;
        horizontalPosition?: "left" | "center" | "right";
        className?: string;
    }>(),
    {
        title: "精选作品",
        subtitle: "每月从全球摄影师中精选最具表现力的作品",
        horizontalPosition: "center",
        className: "mb-16"
    }
);
</script>

<style scoped lang="scss"></style>
